<!DOCTYPE html>
<html>
	<head>
	  	<meta charset="UTF-8">
		<script src="../../public/js/tmpl.js"></script>
		<script>
			var content = template('Phead_resource', {
				title: '支付信息'
			});
			document.write(content);
		</script>
	</head>
	<body class="wrap_bg openCard">
		
		<header>
			<div class="padding10 ">
				<h1 class="color-white am-text-center">请确认订单信息</h1>
			</div>
		</header>
		
		<section class="cont_info">
			
		</section>
		
		<!--底部按钮-->
		<footer class="footer_nav">
			<p class="am-text-center padding10 active_bg color-white am-block bottom_btn">
				<span class="am-text-sm">支付</span>
			</p>
		</footer>
		
		<script>
			var content = template('progress_status', {});
			document.write(content);
		</script>
		
		<script>
			var content = template('Pfoot_resource', {});
			document.write(content);
		</script>
		
		<script id="data_info" type="text/html">
			
			<ul class="ul_box am-text-sm bgs0 marginb10">
				<li class="li_item border-bottom-grey padding-v10 am-cf">
					<span class="am-fl color-white">活动课程</span>
					<span class="am-fr color-white">{{info.name}}</span>
				</li>
				<li class="li_item border-bottom-grey padding-v10 am-cf">
					<span class="am-fl color-white">时间 </span>
					<span class="am-fr color-white">{{info.date_time}}</span>
				</li>
				<li class="li_item border-bottom-grey padding-v10 am-g">
					<span class="am-u-sm-2 color-white padding0">地址</span>
					<span class="am-u-sm-10 color-white padding0">{{info.address}}</span>
				</li>
				<li class="li_item  padding-v10 am-cf">
					<span class="am-fl color-white">人数 </span>
					<div class="am-fr color-white btnState_group">
						{{each info.numb_Of_personels}}
						{{if $index==0}}
						<button class="am-btn am-btn-xs on" data-price="{{$value.price}}">{{$value.num}}人</button>
						{{else}}
						<button class="am-btn am-btn-xs" data-price="{{$value.price}}">{{$value.num}}人</button>
						{{/if}}
						{{/each}}
					</div>
				</li>
			</ul>
			
			<ul class="ul_box am-text-sm margint10 bgs0">
				<li class="li_item border-bottom-grey padding-v10 am-cf">
					<span class="am-fl color-white">代金券 </span>
					<a class="am-fr">
						<span class="color-white">该项目暂不支持使用代金券</span>
						<!--<span class="am-icon-angle-right am-icon-fw"></span>-->
					</a>
				</li>
				<li class="li_item   padding-v10 am-cf">
					<span class="am-fl color-white">总价 </span>
					<span class="am-fr active_color"><span class="total_price">{{info.total_price}}</span>元</span>
				</li>
			</ul>
			
			<p class="am-text-center bottom_tip">
				温馨提示: {{info.tip}}
			</p>
		</script>
		
		<script type="text/javascript">
		
			(function($, arttmpl){
			
				var info = {
					name:'燃脂搏击',
					date_time:'9月18日 11:15-12:25',
					address:'杭州市上城区建国路228号钱江时代大厦对面莲花超市旁杭州市第二人民医院',
					numb_Of_personels:[
						{num:'1',price:'69'},
						{num:'2',price:'138'},
						{num:'3',price:'207'}
					],
					total_price:'69',
					card_isOPen:false,
					discount_price:'69',
					numOf_cashCoupon:0,
					still_pay:'69',
					tip:'开始时间前6个小时前取消预约，住房金额退款；开始时间前6个小时后取消预约，不支持退款。'
				}
			
				var drawInfo = function(data){
					var d = {
						info:data
					};
					
					var content =arttmpl('data_info', d);
					$('.cont_info').html(content);
					
					
					/*绑定事件*/
					var btns = $('.cont_info').find('.btnState_group button');
					
					btns.click(function(){
						
						var i = btns.index($(this))+1;
						var price = $(this).attr('data-price');
						var $price = $('.cont_info').find('.total_price');
						
						$(this).addClass('on').siblings('button').removeClass('on');
						
						$price.html(price);
						
					});
				}
				
				/*成功回调*/
				var successcallback_Info = function(res){
					drawInfo(res)
				}
				
				/*失败回调*/
				var errorcallback = function(statuscode, statusmsg) {
					console.log(statuscode + "  " + statusmsg);
				};
				/*失败回调*/
				var faildcallback = function(xhr, errtype, errthow) {
					console.log(xhr.readyState + "  " + xhr.status + "  " + xhr.statusText);
				};
				
				/*请求数据*/
				var getInfo = function(op, sucessCallback, errorcallback, faildcallback){
					request('url', 't', 'd', info, sucessCallback, errorcallback, faildcallback);
				}
				
				var init = function(){
					getParam();
					getInfo('op', successcallback_Info, errorcallback, faildcallback)
					var $modal = $('#my-modal-loading');
					$modal.hide();
				}
				
				init();
			
			
				//获得页面地址带的参数
				function getParam(){
					
					var start_timeArr = url("?start_time").split(',');
					var end_timeArr = url("?end_time").split(',');
					
					var start_time = start_timeArr[1].replace(/[^0-9]+/g, '')+':'+start_timeArr[2].replace(/[^0-9]+/g, '');
					var end_time = end_timeArr[1].replace(/[^0-9]+/g, '')+':'+end_timeArr[2].replace(/[^0-9]+/g, '');
					
					info.date_time = start_timeArr[0]+'日'+"  "+start_time+'-'+end_time;
					
				}
			
			})(jQuery, template);
		
		
			$(function(){
				$('.bottom_btn').click(function(){
					window.location='../common/register.html'
				})
			})		
		
		</script>
	</body>
</html>
